<template>
  <div>
    <el-container>
      <!-- 顶部栏 -->
      <el-header>
        <img
          src="../assets/layout/logo.png"
          alt="" />
        <div class="right-menu">
          <div>
            <img
              src="../assets/layout/image.png"
              alt="" />
          </div>
          <div>
            欢迎您，<span style="font-size: 14px">{{ $store.state.user.userName }}</span>
          </div>
          <div
            @click='logout'
            class="hands"
            title="退出登录">
            退出<i class="el-icon-caret-bottom"></i>
          </div>
        </div>
      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="167px">
          <!-- 使用侧边栏组件 -->
          <sidebar />
          <div class="el-scrollbar__bar is-vertical">
            <div
              class="el-scrollbar__thumb"
              style="transform: translateY(37.6206%); height: 29.7897%"></div>
          </div>
        </el-aside>

        <!-- 中心栏 -->
        <el-main>
          <!-- 二级路由出口 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
// 引入外部样式
import '@/styles/layout.scss'
// 引入侧边栏组件
import sidebar from '@/components/sidebar.vue'
export default {
  components: {
    sidebar,
  },
  async created() {},
  data() {
    return {}
  },
  methods: {
    logout() {
      this.$store.dispatch('user/logout')
    }
  },
}
</script>

<style lang="scss" scoped>
.el-main,
.el-header {
  padding: 0;
}
</style>
